<template>
    <div class="indexpre">
        <div class="container">
            <img :src="imgpath" alt="" srcset="">
        </div>
        <div class="Welcome typewriter">
            Welcome MyChat！
        </div>
    </div>
</template>

<script setup>
let imgpath = "http://8.134.98.85/onleine.png"

</script>

<style scoped>
.indexpre{
    width: 100vw;
    height: 100vh;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container img {
  max-width: 100%;
  max-height: 100%;
}

.Welcome{
    position: absolute;
    color: white;
    top: 40%;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
}
.typewriter {
  overflow: hidden; /* 隐藏超出容器的文本 */
  border-right: .15em solid orange; /* 添加光标效果 */
  white-space: nowrap; /* 禁止换行 */
  margin: 0 auto; /* 居中显示 */
  letter-spacing: .15em; /* 字母间距 */
  animation: typing 3s steps(40, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: orange; }
}

</style>